html
{
   background-color:rgb(245, 240, 240);
    width: 1040px;
    height:100%;
} 
.flag{
  cursor: pointer;
}
.title1{
  position:absolute;
  font-size: 18px;
  left: 155px;
  top: 620px;
}
.title2{
  font-size: 18px;
  position:absolute;
  left: 637px;
  top: 620px;
}
.odigies{
  font-style: italic;
  width: 410px;
  position:absolute;
  top:10px;
  left:350px;
}
.build{
  position:absolute;
  left: 18px;
  top: 650px;
}
.build1{
  cursor: pointer;
  position:absolute;
width:50px;
height:50px;
top:10px;
left:18px;
border-style: solid;
}
.build1 .tooltiptext1,.build2 .tooltiptext2,.build3 .tooltiptext3{
  visibility: hidden;
  width: 210px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    transition: opacity 0.3s;
}
 /* Tooltip arrow */
 .build1 .tooltiptext1::after,.build2 .tooltiptext2::after,.build3 .tooltiptext3::after{
   content: "";
   position: absolute;
   top: 100%;
   left:30%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: #555 transparent transparent transparent;
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
 .build1:hover .tooltiptext1, .build2:hover .tooltiptext2, .build3:hover .tooltiptext3{
   visibility: visible;
 }
.build2{
position:absolute;
cursor: pointer;
width:50px;
height:50px;
top:10px;
left:88px;
border-style: solid;
opacity: 1
}
.build3{
  position:absolute;
  cursor: pointer;
  height:50px;
  width:50px;
  top:10px;
  left:158px;
  border-style: solid;
}
.build4{
  position:absolute;
  cursor: pointer;
  height:50px;
  width:50px;
  top:10px;
  left:229px;
  border-style: solid;
}
.temples{
  cursor: pointer;
  left: 58.0788px;
  top: 441.6139px;
}
.content{
  position:absolute;
  left:950px;
  top:50px;
  width: 450px;
  height: 605px;
  text-align: center;
  box-shadow: -5px -5px 15px rgba(58, 61, 65, 0.2);  
  overflow-y: scroll;
}
div.ex1 {
  position: relative;
  background-color: rgb(247, 238, 238);
  width: 400px;
  height:600px;
  font-size: 15px;
  left: 25px;
  right: 25px;
  text-align: justify;
}
 #columneDor1:hover,#columneDor2:hover,#columneDor3:hover,#columneDor4:hover,#columneDor5:hover,
 #columneDor6:hover,#zoforos:hover,#epistilio:hover,#kripid:hover,#aetoma:hover,#kionokrano1:hover,
  #kionokrano2:hover,#kionokrano3:hover ,#kionokrano4:hover,#kionokrano5:hover,#kionokrano6:hover,#kripid1:hover,
   #base1:hover, #base1:hover, #base2:hover, #base3:hover, #base4:hover, #base5:hover, #base6:hover,
    #kion1:hover, #kion2:hover, #kion3:hover, #kion4:hover, #kion5:hover, #kion6:hover,
     #kionokranoIon1:hover,  #kionokranoIon2:hover, #kionokranoIon3:hover, #kionokranoIon4:hover,  #kionokranoIon5:hover,
      #kionokranoIon6:hover, #epistilioIon:hover, #zoforosIon:hover, #aetomaIon:hover{
  opacity: 0.5;
}
.myColumneDor1 .tooltip1, .myColumneDor2 .tooltip1,.myColumneDor3 .tooltip1,  .myColumneDor4 .tooltip1,.myColumneDor5 .tooltip1,
  .myColumneDor6 .tooltip1,.zoforosDor .tooltip2, .epistilioDor .tooltip3,
  .kripid .tooltip4,.aetomaDor .tooltip5, .kionokrano1 .tooltip6, .kionokrano2  .tooltip6, .kionokrano3  .tooltip6 ,
   .kionokrano4 .tooltip6, .kionokrano5  .tooltip6, .kionokrano6  .tooltip6, .kripid1 .tooltip4a, .baseIon1 .tooltip6a,
    .baseIon2 .tooltip6a, .baseIon3 .tooltip6a, .baseIon4 .tooltip6a, .baseIon5 .tooltip6a, .baseIon6 .tooltip6a, .kionIon1 .tooltip7a 
    , .kionIon2 .tooltip7a , .kionIon3 .tooltip7a , .kionIon4 .tooltip7a , .kionIon5 .tooltip7a , .kionIon6 .tooltip7a,
    .kionokranoIon1 .tooltip8a, .kionokranoIon2 .tooltip8a, .kionokranoIon3 .tooltip8a, .kionokranoIon4 .tooltip8a,
    .kionokranoIon5 .tooltip8a, .kionokranoIon6 .tooltip8a, .epistilioIon .tooltip9a, .zoforosIon .tooltip10a, .aetomaIon .tooltip11a{
  visibility: hidden;
  background-color: rgb(247, 238, 238);
  left: 18px;
  top: 50px;
  color: rgb(10, 1, 1);
  position: absolute;
  box-shadow: -5px -5px 15px rgba(58, 61, 65, 0.2); 
  width: 870px;
}
.myColumneDor1:hover .tooltip1,.myColumneDor2:hover .tooltip1,.myColumneDor3:hover .tooltip1,.myColumneDor4:hover .tooltip1 ,.myColumneDor5:hover .tooltip1,
.myColumneDor6:hover .tooltip1,.zoforosDor:hover .tooltip2,.epistilioDor:hover .tooltip3,.kripid:hover .tooltip4,.aetomaDor:hover .tooltip5, 
.kionokrano1:hover  .tooltip6, .kionokrano2:hover .tooltip6, .kionokrano3:hover .tooltip6 , .kionokrano4:hover .tooltip6, .kionokrano5:hover .tooltip6,
 .kionokrano6:hover .tooltip6,.kripid1:hover .tooltip4a,.baseIon1:hover .tooltip6a,.baseIon2:hover .tooltip6a,.baseIon3:hover .tooltip6a,.baseIon4:hover
  .tooltip6a,.baseIon5:hover .tooltip6a,.baseIon6:hover .tooltip6a, .kionIon1:hover .tooltip7a
  , .kionIon2:hover .tooltip7a, .kionIon3:hover .tooltip7a, .kionIon4:hover .tooltip7a, .kionIon5:hover .tooltip7a, .kionIon6:hover .tooltip7a,
  .kionokranoIon1:hover .tooltip8a, .kionokranoIon2:hover .tooltip8a,.kionokranoIon3:hover .tooltip8a,
  .kionokranoIon4:hover .tooltip8a,.kionokranoIon5:hover .tooltip8a,.kionokranoIon6:hover .tooltip8a, .epistilioIon:hover .tooltip9a, .zoforosIon:hover .tooltip10a, .aetomaIon:hover .tooltip11a{
  visibility: visible;
}
.myColumneDor1 .tooltip1 img, .myColumneDor2 .tooltip1 img,.myColumneDor3 .tooltip1 img, .myColumneDor4 .tooltip1 img,
.myColumneDor5 .tooltip1 img, .myColumneDor6 .tooltip1 img, .kionIon1 .tooltip7a img
, .kionIon2 .tooltip7a img, .kionIon3 .tooltip7a img, .kionIon4 .tooltip7a img, .kionIon5 .tooltip7a img, .kionIon6 .tooltip7a img{ 
  position: relative;
  display: block;
  float:  left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.aetomaDor .tooltip5 img,.kripid .tooltip4 img,.epistilioDor .tooltip3 img,.zoforosDor .tooltip2 img,.kionokrano1 .tooltip6 img,
 .kionokrano2 .tooltip6 img,.kionokrano3 .tooltip6 img, .kionokrano4  .tooltip6 img,
  .kionokrano5  .tooltip6 img, .kionokrano6 .tooltip6 img,.kripid1 .tooltip4a img,.baseIon1 .tooltip6a img,
  .baseIon2 .tooltip6a img,.baseIon3 .tooltip6a img,.baseIon4 .tooltip6a img,.baseIon5 .tooltip6a img,.baseIon6 .tooltip6a img,
.kionokranoIon1 .tooltip8a img, .kionokranoIon2 .tooltip8a img, .kionokranoIon3 .tooltip8a img, .kionokranoIon4 .tooltip8a img,
.kionokranoIon5 .tooltip8a img, .kionokranoIon6 .tooltip8a img, .epistilioIon .tooltip9a img, .zoforosIon .tooltip10a img, .aetomaIon .tooltip11a img{
  position: relative;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.myColumneDor1 .tooltipText1, .myColumneDor2 .tooltipText1,.myColumneDor3 .tooltipText1,
.myColumneDor4 .tooltipText1,.myColumneDor5 .tooltipText1,.myColumneDor6 .tooltipText1,
.zoforosDor .tooltipText2,.epistilioDor .tooltipText3, .kripid .tooltipText4,
 .aetomaDor .tooltipText5, .kionokrano1 .tooltipText6, .kionokrano2  .tooltipText6,
  .kionokrano3  .tooltipText6 , .kionokrano4 .tooltipText6, .kionokrano5  .tooltipText6,
   .kionokrano6  .tooltipText6, .kripid1 .tooltipText4a,.baseIon1 .tooltipText6a,
   .baseIon2 .tooltipText6a,.baseIon3 .tooltipText6a,.baseIon4 .tooltipText6a,
   .baseIon5 .tooltipText6a,.baseIon6 .tooltipText6a, .kionIon1 .tooltipText7a,
    .kionIon2 .tooltipText7a, .kionIon3 .tooltipText7a, .kionIon4 .tooltipText7a, .kionIon5 .tooltipText7a, .kionIon6 .tooltipText7a,
    .kionokranoIon1 .tooltipText8a, .kionokranoIon2 .tooltipText8a, .kionokranoIon3 .tooltipText8a, .kionokranoIon4 .tooltipText8a,
    .kionokranoIon5 .tooltipText8a, .kionokranoIon6 .tooltipText8a, .epistilioIon .tooltipText9a, .zoforosIon .tooltipText10a, .aetomaIon .tooltipText11a{
  position: relative;
  display: block;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 0px;
  font-size: 12px;
  text-align: justify;
}
#columneDor1{
  position:absolute; 
  left: 59.0624px;
  top: 441.6139px;
}
#columneDor2{
  position:absolute; 
  left:116.1874px;
  top: 441.6139px;
}
#columneDor3{
  position:absolute; 
  left:173.3124px;
  top: 441.6139px;
}
#columneDor4{
  position:absolute; 
  left: 230.4374px;
  top: 441.6139px;
}
#columneDor5{
  position:absolute; 
  left:287.5624px;
  top: 441.6139px;
}
#columneDor6{
  position:absolute; 
  left:344.6874px;
  top: 441.6139px;
}
#kionokrano1{
  position:absolute; 
  left:53.3473px;
  top: 427.3591px;
} 
#kionokrano2{
  position:absolute; 
  left:110.8753px;
  top: 427.3591px;
} 
#kionokrano3{
  position:absolute; 
  left:168.4033px;
  top: 427.3591px;
} 
#kionokrano4{
  position:absolute; 
  left:224.8513px;
  top: 427.3591px;
} 
#kionokrano5{
  position:absolute; 
  left:282.0193px;
  top: 427.3591px;
} 
#kionokrano6{
  position:absolute; 
  left:339.1873px;
  top: 427.3591px;
}
#kripid{
  position:absolute; 
  left:18px;
  top: 592.2076px;
}
#kripid1{
  position:absolute; 
  left:483.0709px;
  top: 592.2076px;
}
#epistilio{
  position:absolute; 
  left:54.5px;
  top: 395.2076px;
}
#zoforos{
  position:absolute; 
  left:58.9983px;
  top: 363.5734px;
}
#aetoma{
  position:absolute; 
  left:17px;
  top: 224px;
}
#base1{
  position:absolute; 
  left:520.4203px;
  top: 579.5437px;
}
#base2{
  position:absolute; 
  left:578.7575px;
  top: 579.5437px;
}
#base3{
  position:absolute; 
  left:639.0947px;
  top: 579.5437px;
}
#base4{
  position:absolute; 
  left:698.4318px;
  top: 579.5437px;
}
#base5{
  position:absolute; 
  left:757.769px;
  top: 579.5437px;
}
#base6{
  position:absolute; 
  left:817.062px;
  top: 579.5437px;
}
#kion1{
  position:absolute; 
  left:526.1544px;
  top: 410.49px;
}
#kion2{
  position:absolute; 
  left:585.4915px;
  top: 410.49px;
}
#kion3{
  position:absolute; 
  left:644.8247px;
  top: 410.49px;
}
#kion4{
  position:absolute; 
  left:704.1659px;
  top: 410.49px;
}
#kion5{
  position:absolute; 
  left:763.5031px;
  top: 410.49px;
}
#kion6{
  position:absolute; 
  left:822.8403px;
  top: 410.49px;
}
#kionokranoIon1{
  position:absolute; 
  left:510.7025px;
  top: 395.7012px;
}
#kionokranoIon2{
  position:absolute; 
  left:570.0396px;
  top: 395.7012px;
}
#kionokranoIon3{
  position:absolute; 
  left:629.3768px;
  top: 395.7012px;
}
#kionokranoIon4{
  position:absolute; 
  left:688.714px;
  top: 395.7012px;
}
#kionokranoIon5{
  position:absolute; 
  left:748.0512px;
  top: 395.7012px;
}
#kionokranoIon6{
  position:absolute; 
  left:807.3637px;
  top: 395.7012px;
}
#epistilioIon{
  position:absolute; 
  left:521.8567px;
  top: 366.5433px;
}
#zoforosIon{
  position:absolute; 
  left:516.4524px;
  top: 336.6012px;
}
#aetomaIon{
  position:absolute; 
  left:476px;
  top: 196px;
}